<!--备份关联页：班车套票、班车站点、班车座位表-->
<template>
    <el-container>
        <el-header class="layout-header">
            <div></div>
            <div>
                <el-button  v-if="page !== 3" type="primary">新增</el-button>
                <template v-if="page === 3">
                    <el-button type="primary" @click="item.show = true" v-for="item in dialogData">{{item.title}}</el-button>

                    <!--<el-button type="primary">生成</el-button>
                    <el-button type="primary">状态批改</el-button>
                    <el-button type="primary">票种批改</el-button>-->
                </template>
            </div>
        </el-header>
        <el-main class="layout-main">

            <div class="table-wrap" ref="tableRef">
                <el-table
                        class=""
                        :height="tableHeight + 'px'"
                        border
                        :data="tableData"
                >
                    <!--<el-table-column v-for="item in cols" :prop="item.field_id" :label="item.label" />-->
                    <el-table-column v-for="item in cols" :prop="item.field_id" :label="item.label" min-width="160">
                        <template #default="scope">
                            <template v-if="!scope.row.$show">
                                <div v-if="item.type === 'bool'">{{scope.row[item.field_id] ? '是' : '否'}}</div>
                                <template v-else>{{scope.row[item.field_id]}}</template>
                            </template>
                            <m-form-item :value="scope.row" :field="item" v-if="scope.row.$show" @m-change="handleChange"></m-form-item>
                        </template>
                    </el-table-column>

                    <el-table-column fixed="right" label="操作" width="120">
                        <template #default="scope">
                            <el-button v-if="scope.row.$show" link type="default" @click="handleClick(scope,'cancel')">确定</el-button>
                            <el-button v-if="!scope.row.$show" link type="primary" @click="handleClick(scope,'edit')">编辑</el-button>
                            <el-button link type="danger" @click="handleClick(scope,'del')">删除</el-button>
                        </template>
                    </el-table-column>

                </el-table>
            </div>
        </el-main>
    </el-container>
    <template v-for="(item,index) in dialogData">

        <el-dialog v-model="item.show" :title="item.title">
            <m-form :fields="item.fieldList" @m-change="dialogChange"></m-form>
            <template #footer>
              <span class="dialog-footer">
                <el-button @click="item.show = false">取消</el-button>
                <el-button type="primary" @click="dialogConfirm(index)">确定</el-button>
              </span>
            </template>
        </el-dialog>
    </template>
</template>

<script setup>
  import {ref,reactive,defineProps, onMounted} from 'vue';
  import { useTable } from '@/composables/table'
  import MForm from '@/components/common/Form/Form'
  import MFormItem from '@/components/common/Form/FormItem'

  /*属性
  * page: 1/2/3  当前显示页 1-班车套票，2-班车站点，3-班车座位表
  * */
  const props = defineProps(['page']);

  let {tableHeight,tableRef,cols,setTableHeight} = useTable(),
    tableData = ref([]);

  tableData.value =[
    {packag_type_name: '哈哈哈',Order_amount: 1000, is_used: true},
    {packag_type_name: '哈哈哈',Order_amount: 1000, is_used: true},
    {packag_type_name: '哈哈哈',Order_amount: 1000, is_used: true},
  ];

  //页面信息
  let pageData = {
      1: {
        cols: [
          {field_id: 'packag_type_name',label: '套票类型名称',type: 'reference' },
          {field_id: 'Order_amount',label: '订单金额',type: 'number' },
          {field_id: 'is_used',label: '使用标识' ,type: 'bool'},
        ]
      },
      2: {
        cols: [
          {field_id: 'shuttle_name',label: '班车名称',type: 'reference' },
          {field_id: 'shuttle_direction_name',label: '班车方向名称',type: 'reference' },
          {field_id: 'sort',label: '序号',type: 'number' },
          {field_id: 'sale_minimum',label: '可售最少数',type: 'number' },
          {field_id: 'departure_time',label: '发车时间',type: 'datetime' },
          {field_id: 'arrive_time',label: '到达时间',type: 'datetime' },
          {field_id: 'mark',label: '说明',type: 'textarea' },
          {field_id: 'is_used',label: '使用标识',type: 'bool' },
        ]
      },
      3: {
        cols: [
          {field_id: 'seat_no',label: '座位号',type: 'number' },
          {field_id: 'seat_status_name',label: '座位状态名称' ,type: 'reference'},
          {field_id: 'ticket_typall_name',label: '票种名称' ,type: 'reference' },
          {field_id: 'up_stop_id',label: '上车站点编号' ,type: 'text' },
          {field_id: 'up_stop_name',label: '上车站点名称' ,type: 'text'},
          {field_id: 'identification_type_id',label: '证件类型编号',type: 'text' },
          {field_id: 'identification_type_name',label: '证件类型名称',type: 'text' },
          {field_id: 'out_trade_no',label: '订单号',type: 'text' },
          {field_id: 'effective_time_start',label: '班车有效时间起',type: 'datetime' },
          {field_id: 'effective_time_end',label: '班车有效时间止',type: 'datetime' },
        ]
      },
    },
    //弹窗信息
    dialogData = reactive([
      {
        title: '生成',
        fieldList: [
          {field_id: 'seat_no',label: '生成座位数',type: 'number',col: 3,index: 0 },
        ],
        show: false,
        data: {},
      },
      {
        title: '状态批改',
        fieldList: [
          {field_id: 'seat_no_start',label: '座位号起',type: 'number',col: 3 ,index: 1},
          {field_id: 'seat_no_end',label: '座位号止',type: 'number' ,col: 3,index: 1},
          {field_id: 'state',label: '状态',type: 'picklist',options: [{label: '已售',value: 0},{label: '未售',value: 1},] ,col: 3,index: 1},
        ],
        show: false,
        data: {},
      },
      {
        title: '票种批改',
        fieldList: [
          {field_id: 'seat_no_start',label: '座位号起',type: 'number' ,col: 3,index: 2},
          {field_id: 'seat_no_end',label: '座位号止',type: 'number',col: 3 ,index: 2},
          {field_id: 'state',label: '票种',type: 'picklist',options: [{label: '单程票',value: 0},{label: '双程票',value: 1},],col: 3 ,index: 2},
        ],
        show: false,
        data: {},
      },
    ]);

  //操作列按钮
  function handleClick(scope,type) {
    if (type === 'cancel') scope.row.$show = false;
    if (type === 'edit') scope.row.$show = true;
  }
  //表格编辑
  function handleChange(data){
    console.log(data);
    let {field_id} = data.field;
    data.oldValue[field_id] = data.value;
  }

  //弹窗内容修改
  function dialogChange(data){

    let {field_id,index} = data.field;
    dialogData[index].data[field_id] = data.value;
  }
  //弹窗确定
  function dialogConfirm(index){
    let data = dialogData[index].data;
    dialogData[index].show = false;
    console.log('弹窗数据：',data);
  }


  onMounted(() => {
    cols.value = pageData[props.page].cols;
  })
</script>

<style scoped lang="less">
    .layout-header{
        display: flex;
        justify-content: space-between;
        height: auto;
        padding: 0;
    }
    .layout-main{
        padding: 10px 0;
        .table-wrap{
            height: 100%;
        }
    }

</style>
